<template>
	<view class="container">
		<view class="golf-title">球场规则</view>
		<view class="golf-rule">
			<evan-radio-group class="golf-ruleRadio" v-model="ruleData">
				<evan-radio ﻿v-for="item in ruleList" :key="item.value" primary-color="#0dd561" :label="item.value" @change="bindRule(item.value)">{{item.label}}</evan-radio>
			</evan-radio-group>
		</view>
		<view class="golf-title flex flex-between">确定开球顺序<text class="golf-adjust align-center" @click="bindAdjust">调整排列</text></view>
		<view class="golf-sequence">
			<ul>
				<li class="flex flex-between align-center golf-seqLi" v-for="(item,index) in sequenceList" :key="index">
					<view class="flex flex-start align-center" @click="bindSwquence(index)">
						<text class="golf-num">{{item.kickoffOrder === 0 ? '' : item.kickoffOrder}}</text>
						<view class="golf-avatar">
							<img :src="item.avatar ? item.avatar : '../../static/image/default.png'">
						</view>
						<text>{{item.nickname}}</text>
					</view>
					<view class="">
						<picker mode="selector" @change="bindPickerChange" :value="item.tee - 1" :range="teeList" :data-index="index">
							<view :class="['golf-tee', $utils.isColor(item.tee)]" color='red'>{{teeList[item.tee - 1]}}</view>
						</picker>
					</view>
				</li>
			</ul>
		</view>
		<view class="golf-btn">
			<button type="default" @click="bindArrangeBtn" :disabled="disabledBtn" :class="backgroundColor?'golfActiveBtn':'golfDisActiveBtn'">确定顺序并开球</button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		onLoad (option) {
			this.golfTournamentId = option.golfTournamentId
			this.getGolfer()
		},
		data() {
			return {
				golfTournamentId: '', // 比赛id
				ruleData: 0,
				ruleList: [{ //比赛规则,0-一般规则,1-大流氓,2-小流氓
						label: '一般规则',
						value: 0
					},
					{
						label: '大流氓',
						value: 1
					},
					{
						label: '小流氓',
						value: 2
					}
				],
				total: null, //排序总数
				count: 0, //排序次数
				sequenceList: [],
				backgroundColor: true, //开球顺序按钮背景颜色
				disabledBtn: false, //开球顺序按钮默认为禁用
				teeList: ['黑Tee', '金Tee', '蓝Tee', '白Tee', '红Tee']
			}
		},
		computed: {},
		methods: {
			async getGolfer () {
				const {
					data: res
				} = await this.$api.arrange.getGolfer({
					data: {golfTournamentId: this.golfTournamentId}
				})
				if (res.code === 0) {
					this.sequenceList = res.data
					this.total = res.data.length
					this.sequenceList.sort(function(a, b) {
						return a.kickoffOrder - b.kickoffOrder;
					})
					for (let val of this.sequenceList) {
						if (val.sex === 2) {
							val.tee = 5
						}
					}
					console.log('获取球手', res.data)
				}
			},
			//球赛规则
			bindRule(e) {
				console.log('球赛规则信息', e)
			},

			//调整开球顺序
			bindAdjust() {
				this.backgroundColor = false
				this.disabledBtn = true
				for (let i = 0; i < this.sequenceList.length; i++) {
					this.sequenceList[i].kickoffOrder = 0
				}
				//需要点击次数
				this.total = this.sequenceList.length
				this.count = 0;
			},

			//重新排序
			bindSwquence(index) {
				if (this.sequenceList[index].kickoffOrder === 0) {
					this.count = ++this.count
					for (let i = 0; i < this.sequenceList.length; i++) {
						this.sequenceList[index].kickoffOrder = this.count
					}
					//设置顺序后重新排序
					if (this.count === this.total) {
						this.sequenceList.sort(function(a, b) {
							return a.kickoffOrder - b.kickoffOrder;
						})
						this.backgroundColor = true
						this.disabledBtn = false
					}
				}
			},

			//切换Tee位
			bindPickerChange(e) {
				// this.pickerIndex = e.detail.value
				// console.log(e.target.dataset.index, )
				this.sequenceList[e.target.dataset.index].tee = Number(e.detail.value) + 1
				// for (let i = 0; i < this.sequenceList.length; i++) {
				// }
			},

			//开球顺序提交按钮
			async bindArrangeBtn() {
				let submitData = {
					golfTournamentId: this.golfTournamentId,
					golfTournamentGalleryList: this.sequenceList,
					tournamentRule: this.ruleData
				}
				const {
					data: res
				} = await this.$api.arrange.orderKickoff({
					data: submitData
				})
				if (res.code === 0) {
					// this.sequenceList = res.data
					// console.log('排列开球成功：', res)
					uni.navigateTo({
					    url: '/pages/score/score?golfTournamentId=' + this.golfTournamentId + '&type=' + 1
					});
				}
			},

		},
		created() {},
		mounted() {}
	}
</script>

<style scoped>
	.golf-rule {
		margin: 24rpx 0 56rpx 0;
	}

	evan-radio {
		margin-right: 56rpx;
	}

	.golf-adjust {
		font-size: 24rpx;
		color: #333;
		background-color: #eee;
		border-radius: 4px;
		padding: 6rpx 8rpx;
	}

	.golf-sequence {
		margin-top: 28rpx;
	}

	.golf-seqLi {
		padding: 15rpx 0;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.golf-num {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #fff;
		border-radius: 50%;
		text-align: center;
		background-color: #0dd561;
	}

	.golf-avatar img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #030303;
		overflow: hidden;
		margin: 0 24rpx 0 36rpx;
	}

	.golf-tee {
		height: 44rpx;
		/* background-color: #027aff; */
		color: #fff;
		border-radius: 4rpx;
		padding: 6rpx 30rpx;
	}

	.golf-btn {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.golfActiveBtn {
		border-radius: 0;
		background-color: #0dd561;
		color: #fff;
	}

	.golfDisActiveBtn {
		border-radius: 0;
		color: #fff;
	}
</style>
